<template>
    <div class="adminmanagement" style="width: 1280px;margin: 0 auto;">
        <div class="admin_header">
            <div class="administrator_header">
                <div class="ax_default box_2" id="u9509">
                    <div id="u9509_div"></div>
                </div>
                <span class="header_words">角色管理</span>
            </div>
            <div class="header_btn">
                <el-row>
                    <el-button type="primary" plain @click="delUsers">删除</el-button>
                    <el-button type="primary" @click="Skiprole">新增职称</el-button>
                </el-row>
            </div>
        </div>
        <div class="admin_list">
            <div class="input_header">
                <el-row class="header_put">
                    <el-input @blur="serachUser" ref="serachInp" v-model="input" placeholder="请输入职称名称"
                        class="head_input"></el-input>
                    <el-button type="primary" class="input_btn" @click="serachUser">搜索</el-button>
                </el-row>

            </div>
            <div class="list_item">
                <el-table ref="multipleTable" @selection-change="
                    (selections) => { changeCheck(selections) }" :data="listData" tooltip-effect="dark"
                    style="width: 100%">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="role" label="角色名称" align="center">
                    </el-table-column>
                    <el-table-column prop="numberPeople" label="角色下管理员人数" align="center">
                    </el-table-column>
                    <el-table-column prop="roleDescribe" label="角色描述" align="center">
                    </el-table-column>

                    <el-table-column prop="isenabled" label="是否启用" align="center">
                        <template slot-scope="scope">
                            <el-switch @change="changeSwitch(scope.row.id)" v-model="scope.row.setMealState"
                                active-color="#1890FF" inactive-color="#A9A8A8" />
                        </template>
                    </el-table-column>

                    <el-table-column prop="addDate" label="添加时间" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" align="center" width="80px">
                        <div class="list_img" slot-scope="{row}">
                            <div @click="$event => Jumpadmin(row.id)"><img src="../../../img/systemsettings/u8010 (1).svg"
                                    alt="">
                            </div>
                            <div @click="$event => delUser(row.id)"><img src="../../../img/systemsettings/u8011.svg" alt="">
                            </div>
                        </div>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="admin_footer">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[10, 5, 20]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>

import { getUserList, delUserData, updataUserData, getPagingUserList } from '@/api/systemRole'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { promptModel } from '@/utils/tools'
import { prompt } from '@/utils/tools'

export default {
    name: 'Rolement',
    data() {
        return {
            input: '',
            listData: [

            ],
            currentPage4: 1,
            page: 1,
            limit: 10,
            total: 0,
            checkedArr: []  // 选中用户的数组
        }
    },
    methods: {
        // 获取最新数据
        async getUserData() {
            let _res = await getPagingUserList(this.page, this.limit)
            this.listData = _res.data

            // 计算数据总数
            let _arr = await getUserList()
            this.total = _arr.data.length
        },
        // 点击单选框
        changeCheck(selection) {
            this.checkedArr = selection
        },
        // 删除已选择的用户
        delUsers() {
            if (confirm('您确定要删除选中的所有用户嘛？')) {

                this.checkedArr.forEach(async item => {
                    console.log(item.id);
                    await delUserData(item.id)
                })

                this.$message({
                    message: '删除成功',
                    type: 'success'
                })

                // setTimeout(() => {
                this.getUserData()
                // }, 10)
            }


        },
        // 用户 点击 开关
        async changeSwitch(id) {
            this.listData.filter(item => {
                item.id == id ? !item.setMealState : item.setMealState
            })
            let _obj = this.listData.filter(item => {
                return item.id == id
            })
            await updataUserData(id, _obj[0])
        },

        // 切换 添加职称页
        Skiprole() {
            this.$router.push({
                name: 'addrole',
                params: {
                    type: 'add'
                }
            })
        },
        Jumpadmin(id) {
            // 切换到编辑页面
            let _userObj = this.listData.filter(item => {
                return item.id == id
            })
            // console.log(_userObj);
            this.$router.push({
                name: 'addrole',
                params: {
                    type: 'updata',
                    _userObj: _userObj[0]
                }
            })

        },
        // 删除用户
        async delUser(id) {
            if (confirm('您确定要删除嘛')) {
                await delUserData(id),
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    })
                this.getUserData()
            }
        },
        // 分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val
            this.getUserData(this.page, this.limit)
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val
            this.getUserData(this.page, this.limit)
        },
        // 搜索框 失去焦点搜索
        async serachUser(e) {
            let _val = this.$refs.serachInp.value
            // 如果输入框内容不为空  就遍历数据库中的数据 并且返回 符合搜索要求数据
            if (_val != '') {
                let _arr = await getUserList()
                let serachArr = []

                _arr.data.forEach(item => {
                    if (item.role.indexOf(_val) >= 0) {
                        serachArr.push(item)
                    }
                })

                this.listData = serachArr

                this.page = 1
                this.limit = 10
                this.total = this.listData.length


            } else {
                this.getUserData()
            }
        }
    },
    mounted() {
        this.getUserData()
    },


    // url: 'http://localhost:3000/role',

}
</script>
<style lang="scss" scoped>
.head_input {
    width: 300px;
}

.admin_header {
    display: flex;
    justify-content: space-between;
}

.administrator_header {
    display: flex;
    align-items: center;
}

#u9509 {
    border-width: 0px;
    width: 24px;
    height: 8px;
    display: flex;
    font-size: 16px;
    color: #006EFF;

}

#u9509_div {
    border-width: 0px;
    width: 24px;
    height: 8px;
    background: inherit;
    background-color: rgba(0, 110, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    color: #006EFF;
}

.header_words {
    margin-left: 20px;
    font-size: 24px;
}

.input_header {
    display: flex;
}

.header_put {
    display: flex;
    align-items: center;
}

.admin_list {
    border-radius: 10px;
    box-shadow: 0 0 20px #ccc;
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
}

.input_btn {
    margin-left: 10px;
    height: 35px;
    padding: 0 15px;
}

.admin_footer {
    // height: 64px;
    // line-height: 64px;
    display: flex;
    padding: 20px;
    justify-content: right;
    // position: absolute;
    // right: 0;
}

.admin_footer p {
    text-align: center;
    font-size: 12px;
    color: #ccc;
}

.admin_footer p span:hover {
    cursor: pointer;
    color: rgb(0, 110, 255);
}

.list_img {
    display: flex;
    justify-content: space-between;
    // height: 800px;
    // overflow: auto;
}

.admin_list {
    overflow: auto;
}



.admin_list {
    border-radius: 10px;

    box-shadow: 0 0 20px #ccc;
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
}

.input_btn {
    margin-left: 10px;
    height: 35px;
    padding: 0 15px;
}

.list_item {
    display: flex;

}

.table_list {
    text-align: center;
}

.list_img {
    display: flex;
    justify-content: space-around;
}



.list_bottom {
    position: relative;
    // margin: 30px 0;
    margin-top: 20px;
    margin-bottom: 50px;
}

.botton_page {
    display: flex;

    position: absolute;
    right: 0;
    // margin-left: 100px;
}

// .page_btn{
//     border: 1px solid #006EFF;
//     width: 30px;
//     height: 12px;
//     font-size: 14px;
//     line-height: 12px;
//     // text-align: center;
// }
.page_btn {
    padding: 6px 10px;
}

.admin_footer {
    height: 64px;
    line-height: 64px;
}

.admin_footer p {
    text-align: center;
    font-size: 12px;
    color: #ccc;
}

.admin_footer p span:hover {
    cursor: pointer;
    color: rgb(0, 110, 255);
}
</style>